<template>
  <header>
    <router-link class="header-logo" to="/"></router-link>
    <div class="search">
      <input type="text" />
      <span @click="submit_search">
        <icon-search theme="outline" size="0.15rem" fill="#333" />
        <span>search</span>
      </span>
    </div>
    <!-- <div>
            <div class="header-button">
                <div class="button">
                    <router-link to="/login">
                        <span>登录</span>
                    </router-link>
                </div>
                <div class="button">
                    <router-link to="/register">
                        <span>注册</span>
                    </router-link>
                </div>
            </div>
        </div> -->
    <div class="header-right">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar> user </el-avatar>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>收藏夹</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

const submit_search = function () {};
</script>

<style lang="scss" scoped>
$header-height: 0.3rem;
$logo-width: 0.6rem;
$a-font-size: 0.08rem;

header {
  background: rgb(190, 190, 100);
  background-position: bottom;
  background-repeat: repeat no-repeat;
  background-size: auto cover;
  position: fixed;
  border: 0.1rem;
  border-radius: 0.1rem;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  display: flex;
  justify-content: space-between;

  .header-right {
    .el-dropdown-link {
        display: flex;
        
    }
  }

  .header-logo {
    background-image: url("@/assets/logo/logo.png");
    display: inline-block;
    width: $logo-width;
    height: $header-height;
    line-height: $logo-width;
    margin: 0 0.1rem;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: top;
    background-position: center center;
  }

  .search {
    width: $logo-width * 5;
    height: $header-height;
    // background-color: #223c94;
    display: flex;
    align-items: center;

    input {
      background-color: rgb(200, 210, 200);
      height: $header-height * 0.6;
      width: $logo-width * 3;
      border: 0.1rem;
      border-radius: 0.1rem;
    }

    span {
      font-size: $a-font-size;
      line-height: $header-height * 0.6;
      font-weight: $a-font-size;
      display: flex;
      align-items: center;
    }
  }

  .header-button {
    width: $logo-width * 1.5;
    height: $header-height;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .button {
      color: black;
      transition: color 0.25s;

      span {
        font-size: $a-font-size;
        font-weight: bold;
      }

      &:hover {
        text-decoration: none;
        color: #223c94;
        border-bottom: #979daf 3px solid;
      }
    }
  }
}

a {
  text-decoration: none;
}

span {
  cursor: pointer;
}
</style>
